<template>
    <div class="index">
        <div class="left-area-box">
            <my-left-area class="index-left" :leftcontent='leftcontent' :title='title' :leftNum='leftNum' @leftAreaSuccess='leftAreaSuccess(arguments)'></my-left-area>
        </div>
        <div class="index-right">
            <!-- 头 -->
            <div class="right-header">
                <div class="header-left">
                    <span>{{headerTitle}}</span>
                </div>
                <div class="header-right">
                    <span>欢迎您，{{uname}}</span>
                    <span style="margin-left:30px;color:blue;" @click="dadsa">修改密码</span>
                    <span style="padding-right:30px;padding-left:15px">{{format(time)}}</span>
                    <span class="out" @click="out()" style="color: #57A7FD;">退出</span>
                </div>
            </div>
            <div class="inner-box">
                <!-- <h3 class="pagetitleClick">{{pagetitle}}</h3> -->
                <ul class="pagetitleClick">
                    <li v-for="p,i of pagetitle" :key="i" :class="{active:m==i}">
                        <span v-if="p.name!='首页'" class="err" @click="delClick(i)">x</span>
                        <span @click="goClick(i)" >{{p.name}}</span>
                    </li>
                </ul>
                <!-- <keep-alive> -->
                    <router-view @pagetitleChange='leftAreaSuccess(arguments)'></router-view>
                <!-- </keep-alive> -->
            </div>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                 <p class="content-top">
                    <span>修改密码</span>
                 </p>
                <ul class="content-items">
                    <li class="item">
                        <span>新密码</span>
                        <input type="text" v-model="psa" style="width:300px;">
                    </li>
                    <li class="item">
                        <span>确认密码</span>
                         <input type="text" v-model="nupwd" style="width:300px;">
                    </li>
                </ul>
                <div  style="text-align:center;margin-top:38px">
                  <el-button type="primary"  @click="determine" icon="el-icon-finished">确定</el-button>
                  <el-button  @click="cancelClick2">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myLeftArea from "@/components/assembly/leftArea.vue";
export default {
    components:{myLeftArea},
    data() {
        return {
            leftNum:'',
            m:0,
            pagetitle:[],
            psa:'',
            nupwd:'',
             token:'',
            masknum:false,
            title:'疫情管理',//侧边栏标题
            headerTitle:'疫情管理采集系统',//头标题
            // pagetitle:'',//每页标题
            leftcontent:[//侧边栏数据
                 {
                    name:'首页',
                    children:[
                        {name:'首页',index:'/index/Home'},
                    ],
                },
                {
                    name:'用户管理',
                    children:[
                        {name:'用户信息',index:'/index/user'},
                    ],
                },
                {name:'地址管理',
                    children:[
                        {name:'地址信息',index:'/index/address'},
                        // {name:'设备绑定部门',index:'/index'},
                    ]
                },
                {name:'设备管理',
                    children:[
                        {name:'设备',index:'/index/equipment'},
                    ]
                    
                },
                {name:'SN码管理',
                    children:[
                        {name:'SN码',index:'/index/idencode'},
                    ]
                },
                 {name:'菜单管理',
                    children:[
                        {name:'菜单管理',index:'/index/menu'},
                    ]
                },
            ],
            uname:'',//用户名称
            time:'',//实时时间
        }
    },
    mounted(){
         this.token=sessionStorage.getItem('token')
        this.uname=sessionStorage.getItem('uname')
        setInterval(() => {
            this.time=Date.parse(new Date())
        }, 1000);
        this.getUserMenu()
    },
    methods: {
        getUserMenu(){//动态路由
             this.axios.get('/monitor/Sys/Menu/getUserMenu').then(res=>{
                 this.leftcontent = res.data.data
            })
        },
        //点击标签切换页面
        goClick(i){
            this.m=i
            this.$router.push(this.pagetitle[i].index)
            this.leftNum=this.pagetitle[i]
        },
        //删除标签
        delClick(i){
            this.pagetitle.splice(i,1)
            this.goClick(i-1)
        },
        leftAreaSuccess(pagetitle){
            var num=1
            for(var i=0;i<this.pagetitle.length;i++){
                if(this.pagetitle[i].name==pagetitle[0]){
                    num=0
                    this.$router.push(this.pagetitle[i].index)
                    this.m=i
                }
            }
            if(num==1){
                if(this.pagetitle.length<=9){
                    var obj={
                        name:pagetitle[0],
                        index:pagetitle[1],
                        n:pagetitle[2],
                        m:pagetitle[3],
                        l:pagetitle[4]
                    }
                    this.pagetitle.push(obj)
                    this.m=this.pagetitle.length-1
                }else{
                    this.$alert('请不要打开过多页面', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {}
                    });
                }
            }
        },
        //退出
        out(){
            sessionStorage.clear();
            this.$store.commit('out_mutation')
            this.$router.push('/')
            window.location.reload()
        },
        dadsa(){
            this.masknum=true;
        },
        cancelClick2(){
            this.masknum=false;
        },
        determine(){
            if(this.psa!=this.nupwd){
               this.$message({ type: "warning", message: "两次密码不一致!",});
            }else if(this.psa==this.nupwd){
              this.axios({
                    url:'/monitor/Sys/user/updatePassword?psa=' +this.psa,
                    method:'post',
                    headers:{Authorization:this.token}
                }).then((res) => {
                console.log(res);
                if (res.status == 200) {
                    console.log(res.status);
                    this.$message({ type: "success", message: "提交成功!",});
                } else {
                    this.$message.error(res.status.error);
                }
                });
            }
        },
        //时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
        $route(to,from){
            var reg=new RegExp('/index/useradd')
            if(reg.test(to.path)){
                this.pagetitle='新增用户'
            }
        }
    }
}
</script>
<style scoped>
.index{
    /* width: 100vw; */
    min-width: 1080px;
    min-height: 100vh;
    display: flex;
}
.left-area-box{
    width: 204px;
}
.index-left{
    width: 204px;
    transition: all .3s;
    position: fixed;
}
.index-right{
    width: calc(100% - 204px);
    background: rgb(240, 240, 240);
}
.right-header{
    width: 100%;
    height: 70px;
    padding:0 30px;
    box-sizing: border-box;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.header-left{
    font-size: 23px;
    color: #333333;
    display: flex;
    align-items: center;
}
.header-right{
    font-size: 16px;
    color: #666;
}
.inner-box{
    padding:10px 20px 15px 20px ;
    background: #fff;
    margin: 10px 0 0 10px;
    position: relative;
    color: #333333;
	height: calc(100% - 86px - 10px);
}
/* h3标题 */
/* .pagetitleClick{
    font-size: 20px;
    color: #333;
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
} */
/* 标题 */
.pagetitleClick{
    display: flex;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.pagetitleClick li{
    padding:0px 16px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #eee;
    margin-right: 10px;
    border-radius: 2px;
    position: relative;
}
.err{
    position: absolute;
    font-size: 12px;
    top: -10px;
    right: 3px;
    color: #777;
    cursor:pointer;
}
.active{
    color: #fff;
    background: #66b1ff;
}
.active span{
    color:#fff;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}

.mask .content {
  width: 600px;
  height: 310px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 40px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 100px;
}
</style>